<%@ page import="com.ws.lv.util.Res" %>
<%@ page import="com.ws.lv.bean.Route" %>
<%@ page import="java.util.List" %><%--
  Created by IntelliJ IDEA.
  User: Adminis
  Date: 2025/3/19
  Time: 11:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>顽石旅行网</title>
    <!-- Bootstrap -->
    <link href="${pageContext.request.contextPath}/home/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/home/css/common.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/home/css/index.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>-->
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <%--        <![endif]-->--%>
    <style>
        .topbar {
            position: relative
        }

        .hottel, .haslogin {
            position: absolute;
            top: 12px;
            right: 50px
        }

        .hottel p {
            cursor: pointer;
            font-weight: 700;
            float: left;
            width: 100px;
            border: 1px solid orange;
            text-align: center;
            height: 45px;
            line-height: 45px;
            margin-right: 10px
        }

        .hottel a {
            color: #666;
            text-decoration: none
        }

        .haslogin {
            top: 45px;
            right: 0
        }

        .haslogin p {
            font-weight: 700;
            float: left;
            margin-right: 30px;
            font-size: 18px
        }

        /*友情链接*/
        .lianjie {
            margin: 20px auto;
            width: 1200px;
            font-size: 18px;
        }

        .lianjie ul li {
            list-style: none;
            display: inline-block;
            margin-right: 10px;
        }

        .lianjie ul li a {
            font-size: 16px;
            text-decoration: none;
            color: #000000;
            font-family: 'Roboto', sans-serif; /* 使用Google Fonts中的Roboto字体 */
            transition: box-shadow 0.3s ease; /* 添加过渡效果 */
        }

        .lianjie ul li a:hover {
            color: #7c00ff;
        }

        .company {
            background-color: whitesmoke;
            border-top: 3px solid rgba(15, 250, 231, 0.6);
        }

        .company .ctr {
            color: black;
            margin: 10px auto;
            font-size: 16px;
        }

        /*自加*/

        .carousel-inner .item a img {
            margin: 0 auto;
            width: 1500px;
            height: 500px;
        }

        .navitem .nav li a:hover {
            color: #ffc900;
            background-color: #4fd5df;
        }

        .jx_tabs li span a {
            font-style: normal;
        }

        .jx_tabs li span a:hover {
            border: 2px solid rebeccapurple;
        }

        .ctrimg img {
            display: inline-block;
            width: 120px;
            height: 120px;
            vertical-align: middle;
            margin: auto 60px;
        }

        .tx {
            display: inline-block;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            float: left;
            margin-top: -20px;
            margin-right: 10px;
        }


    </style>
</head>
<body>
<!--引入头部-->
<!-- 头部 start -->
<header id="header">

    <div class="header_wrap">
        <div class="topbar">
            <div class="logo">
                <a href="/"><img src="${pageContext.request.contextPath}/home/images/logo.png" style="height: 60px;"
                                 alt=""></a>
            </div>
            <div class="search">
                <form action="${pageContext.request.contextPath}/homepage/toRoute_list" method="post">
                    <input name="route_name" type="text" placeholder="请输入路线名称"
                           class="search_input" autocomplete="off">
                    <button class="search-button" type="submit">搜索</button>
                </form>
            </div>

            <c:if test="${u!=null}">
                <div class="haslogin">
                    <p><a href="${pageContext.request.contextPath}/homepage/toMypage">
                        <img src="<%=Res.homeTxFileUrl%>${u.user_tx}" class="tx">
                        欢迎：${u.user_name}
                    </a>
                    </p>
                    <p><a href="${pageContext.request.contextPath}/user/outLogin">退出登录</a></p>
                </div>
            </c:if>
            <c:if test="${u==null}">
                <div class="hottel">
                    <a href="${pageContext.request.contextPath}/homepage/toHomeLogin"><p>登录</p></a>
                    <a href="${pageContext.request.contextPath}/homepage/toRegister"><p>注册</p></a>
                </div>
            </c:if>

        </div>
    </div>
</header>
<!-- 头部 end -->
<!-- 首页导航 -->
<div class="navitem">
    <ul class="nav">
        <li class="nav-active"><a href="${pageContext.request.contextPath}/homepage/toHomePage">首页</a></li>
        <c:forEach items="${types}" var="type">
            <li>
                <a href="${pageContext.request.contextPath}/homepage/toType?type_id=${type.type_id}">${type.type_name}</a>
            </li>
        </c:forEach>
        <li><a href="${pageContext.request.contextPath}/homepage/toFavoriterank">收藏排行榜</a></li>
    </ul>
</div>

<!-- banner start-->
<section id="banner">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="2000">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <c:forEach items="${slideshows}" varStatus="index">
                <c:if test="${index.index==0}">
                    <li data-target="#carousel-example-generic" data-slide-to="${index.index}" class="active"></li>
                </c:if>
                <c:if test="${index.index!=0}">
                    <li data-target="#carousel-example-generic" data-slide-to="${index.index}"></li>
                </c:if>
            </c:forEach>
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <c:forEach items="${slideshows}" var="slideshow" varStatus="index">
                <c:if test="${index.index==0}">
                    <div class="item active">
                        <a href="${pageContext.request.contextPath}/homepage/toRoute_detail?route_id=${slideshow.slideshow_routeId}">
                            <img src="<%=Res.fileUrl%>${slideshow.slideshow_url}" alt="">
                        </a>
                    </div>
                </c:if>
                <c:if test="${index.index!=0}">
                    <div class="item">
                        <a href="${pageContext.request.contextPath}/homepage/toRoute_detail?route_id=${slideshow.slideshow_routeId}">
                            <img src="<%=Res.fileUrl%>${slideshow.slideshow_url}" alt="">
                        </a>
                    </div>
                </c:if>
            </c:forEach>
        </div>
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</section>

<!-- banner end-->
<!-- 旅游 start-->
<section id="content">
    <!-- 主题游start-->
    <section class="jx">
        <div class="jx_top">
            <div class="jx_tit">
                <img src="${pageContext.request.contextPath}/home/images/icon_6.jpg" alt="">
                <span>主题游</span>
            </div>
            <!-- Nav tabs -->
            <ul class="jx_tabs" role="tablist">
                <c:forEach items="${themes}" var="theme" varStatus="index">
                    <c:if test="${index.index==0}">
                        <li role="presentation" class="active">
                            <a href="#theme-${theme.theme_id}" aria-controls="theme" role="tab"
                               onclick="theme(${theme.theme_id})"
                               data-toggle="tab">${theme.theme_name}</a>
                            <span></span>
                        </li>
                    </c:if>

                    <c:if test="${index.index!=0}">
                        <li role="presentation">
                            <a href="#theme-${theme.theme_id}" aria-controls="theme" role="tab"
                               onclick="theme(${theme.theme_id})"
                               data-toggle="tab">${theme.theme_name}</a>
                            <span></span>
                        </li>
                    </c:if>
                </c:forEach>
            </ul>
        </div>
        <div class="jx_content">
            <!-- Tab panes -->
            <div class="tab-content">
                <c:forEach items="${themeRoutes}" var="theme" varStatus="number">
                    <c:if test="${number.index==0}">
                        <div role="tabpanel" class="tab-pane active" id="theme-${theme.key}">
                            <div class="row">
                                <c:forEach var="route" items="${themeRoutes.get(theme.key)}">
                                    <div class="col-md-3">
                                        <a href="${pageContext.request.contextPath}/homepage/toRoute_detail?route_id=${route.route_id}">
                                            <img src="<%=Res.mainFileUrl%>${route.routh_mainImage}" alt="" width="284"
                                                 height="165">
                                            <div class="has_border">
                                                <h3>${route.route_name}</h3>
                                                <div class="price">网付价<em>￥</em><strong>${route.route_price}</strong><em>起</em>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </c:forEach>
                            </div>
                        </div>
                    </c:if>

                    <div role="tabpanel" class="tab-pane" id="theme-${theme.key}">
                        <div class="row">
                            <c:forEach var="route" items="${themeRoutes.get(theme.key)}">
                                <div class="col-md-3">
                                    <a href="${pageContext.request.contextPath}/homepage/toRoute_detail?route_id=${route.route_id}">
                                        <img src="<%=Res.mainFileUrl%>${route.routh_mainImage}" alt="" width="284"
                                             height="165">
                                        <div class="has_border">
                                            <h3>${route.route_name}</h3>
                                            <div class="price">网付价<em>￥</em><strong>${route.route_price}</strong><em>起</em>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </c:forEach>
                        </div>
                    </div>
                </c:forEach>

            </div>
        </div>
    </section>
    <!-- 主题游end-->

    <c:forEach items="${types}" var="type">
        <c:set var="routesKey" value="routesByType${type.type_id}"/>
        <section class="jx">
            <c:if test="${requestScope[routesKey].size() > 0}">
                <div class="jx_top">
                    <div class="jx_tit">
                        <img src="${pageContext.request.contextPath}/home/images/icon_7.jpg" alt="">
                        <span>${type.type_name}</span>
                    </div>
                </div>
            </c:if>
            
            <div class="gn">
                <div class="row">

                    <c:forEach var="route" items="${requestScope[routesKey]}">
                        <div class="col-md-3">
                            <a href="${pageContext.request.contextPath}/homepage/toRoute_detail?route_id=${route.route_id}">
                                <img src="<%=Res.mainFileUrl%>${route.routh_mainImage}" alt="" width="284" height="165">
                                <div class="has_border">
                                    <h3>${route.route_name}</h3>
                                    <div class="price">网付价<em>￥</em><strong>${route.route_price}</strong><em>起</em>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </c:forEach>
                </div>
            </div>
        </section>
    </c:forEach>
</section>
<!-- 旅游 end-->
<!--导入底部-->
<div class="lianjie">
    <p style="margin-bottom: 10px">友情链接:</p>
    <ul>
        <c:forEach items="${links}" var="link">
            <li><a href="${link.link_url}">${link.link_name}</a></li>
        </c:forEach>
    </ul>
</div>
<!-- 尾部 start-->
<footer id="footer">
    <div class="company">
        <div class="ctr">顽石教育有限公司 版权所有Copyright 2019-2020, All Rights Reserved 京ICP备12390</div>
        <div class="ctr">
            顽石教育客服中心设立在江苏南京及江苏宿迁，来电显示号码请查看： 顽石教育会员中心外呼电话号码汇总
        </div>
        <div class="ctr">
            北京顽石教育国际旅行社有限公司，旅行社业务经营许可证编号：L-BJ-CJ00144　　上海顽石教育国际旅行社有限公司，旅行社业务经营许可证编号：L-SH-CJ00107
        </div>
        <div class="ctr">
            Copyright © 2006-2025 南京顽石教育科技有限公司 lzc.ws.com | 营业执照 | ICP证：苏B2-20130006 |
            苏ICP备12009060号-4
            | 苏网食备A32000000032 | 石家庄旅游网
        </div>
        <div class="ctr">
            关于我们 顽石教育经过多年打拼 终于在石家庄市获得了一席之地 这代表着我们公司及团队的成长与付出
            我们一直以“专业、高效、创新” 作为团队的精神 多年来打压着外部及内部的乐色公司 一步步往上爬 终于在2025年本公司的项目上市
            获得多平台联合认可 全国服务热线：400-888-8888
        </div>
        <div class="ctr">
            感谢大家这么长时的陪伴 愿我们的努力 为每一位顾客带来一份快乐
        </div>
        <div class="ctrimg">
            <img src="${pageContext.request.contextPath}/home/images/kuaishou.png" alt="">
            <img src="${pageContext.request.contextPath}/home/images/douyin.png" alt="">
            <img src="${pageContext.request.contextPath}/home/images/xiaomi.png" alt="">
            <img src="${pageContext.request.contextPath}/home/images/huawei.png" alt="">
            <img src="${pageContext.request.contextPath}/home/images/jiangbei.png" alt="">
            <img src="${pageContext.request.contextPath}/home/images/jingcha.png" alt="">
        </div>
    </div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="${pageContext.request.contextPath}/home/js/jquery-3.3.1.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="${pageContext.request.contextPath}/home/js/bootstrap.min.js"></script>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="${pageContext.request.contextPath}/home/js/include.js"></script>
</body>
</html>
<script type="text/javascript">
    function theme(themeId) {
        // 获取所有主题内容的div
        var themePanes = document.querySelectorAll('.tab-pane');
        // 隐藏所有主题内容
        themePanes.forEach(function (pane) {
            pane.classList.remove('active');
        });
        // 显示选中的主题内容
        var selectedPane = document.getElementById('theme-' + themeId);
        if (selectedPane) {
            selectedPane.classList.add('active');
        }
    }


</script>